Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
*, *:before, *:after {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing:border-box;
}
body {
  background-color: #121418;
  display: grid;
  place-items: center;
  min-height: 100vh;
  color: #ccc;
  font-family: sans-serif;
  font-size: 18px;
  perspective: 400px;
}

.card {
  --tiltX: -10;
  --tiltY: 0;
  --angle: 90;
  
  position: relative;
  width: 300px;
  height: 300px;
  transform: rotateX(calc(var(--tiltX) * -1deg)) rotateY(calc(var(--tiltY) * 1deg));
  background-color: #666;
  background-image: url('https://picsum.photos/id/660/300/300');
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 2rem rgba(#000, .5);
  border-radius: 1rem;
  overflow: hidden;
  
  &:before {
    content: "";
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(calc(var(--angle) * 1deg + 90deg), transparent, rgba(#fff, .5), transparent);
  }
}

Frontend Forever App